<template>
  <div class="product-template-list-view">

    <!-- start content -->
    <div class="product-template-list-content">
     
      <!-- start 表格 -->
      <el-table
        :data="page.list"
        :row-key="getRowKey"
        stripe
        border
        :highlight-current-row="false"
        header-row-class-name="sms-template-record-table-header"
        ref="productTemplateTable"
        class="product-template-table email-table sms-template-record-table"
      >
        <el-table-column
          v-for="column in columns"
          :key="column.field"
          :label="column.label"
          :prop="column.field"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :sortable="column.sortable"
          show-overflow-tooltip
          :align="column.align"
        >
          <template slot-scope="scope">
            <span v-if="column.field === 'status'" :class="[scope.row.status]">
              {{formatStatus(scope.row.status)}}
            </span>
            <template v-else-if="column.field === 'applyContent'">
              <!-- applyContent 是审核中内容，审核通过后后端会置为null,此时模板内容变成allowContent  -->
              {{scope.row.applyContent || scope.row.allowContent}}
            </template>
            <template v-else-if="column.field === 'operation'">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.notice == '自定义通知' || scope.row.notice == '营销模板' " type="text" style="color: #fb602c!important;" @click="del(scope.row)">删除</el-button>
            </template>
            <template v-else>{{scope.row[column.field]}}</template>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 表格 -->

      <!-- start 表格底部 -->
      <div class="table-footer">
        <div class="list-info">
          共
          <span class="level-padding">{{ page.total || 0 }}</span>记录
        </div>
        <el-pagination
          class="product-template-table-pagination"
          background
          @current-change="jump"
          @size-change="handleSizeChange"
          :page-sizes="defaultTableData.defaultPageSizes"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          layout="prev, pager, next, sizes, jumper"
          :total="page.total"
        ></el-pagination>
      </div>
      <!-- end 表格底部 -->

    </div>
    <!-- end content -->

  </div>

</template>

<script>
import Page from '@model/Page';
import { formatDate } from 'pub-bbx-utils';
import { defaultTableData } from '@src/util/table'

export default {
  name: 'sms-template-record',
  props: {
    date: {
      type: Array,
      default: ()=>[]
    },
  },
  data() {
    return {
      defaultTableData,
      columns: [], // 列
      page: new Page(), // page 对象
      searchModel: {
        pageSize: 10,
        pageNum: 1,
      },
    };
  },
  mounted() {
    this.columns = [
      {
        label: '模板名称',
        field: 'name',
        show: true,
        fixed: true,
      },
      {
        label: '模板类型',
        field: 'notice',
        show: true,
        fixed: true,
      },
      {
        label: '模板内容',
        field: 'applyContent',
        show: true,
        fixed: true,
        minWidth: 300
      },
      {
        label: '状态',
        field: 'status',
        show: true,
        fixed: true,
      },
      {
        label: '操作',
        field: 'operation',
        show: true,
        fixed: true,
      },
    ]
    this.$nextTick(()=>{
      this.search();
    });
  },
  methods: {
    edit(item){
      this.$emit('edit', item)
    },
    del({ id, name }){
      this.$confirm(`确定要删除模版 ${ name } ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http.get('/vipsms/delete', { id }).then(data=>{
            if(data.status) return this.$platform.notification({
              title: '删除失败',
              message: data.message || '',
              type: 'error'
            })
            this.$platform.notification({
              title: '成功',
              type: 'success',
              message: '删除成功',
            });
            this.search();
          })
        });
    },
    formatTime(val) {
      if (!val) return '';
      val = +val; // 这里需要把后端返回的字符串转成number
      return formatDate(val, 'YYYY-MM-DD HH:mm:ss');
    },
    formatStatus(status) {
      if (!status) return '';
      let res;
      switch (status) {
      case 'in_approval':
        res = '审核中'; 
        break;
      case 'pass_approval':
        res = '已通过'; 
        break;
      case 'refuse_approval':
        res = '未通过'; 
        break;
      default:
        break;
      } 
      return res; 
    },

    buildParams() {
      const sm = Object.assign({}, this.searchModel);
      let params = {
        pageSize: sm.pageSize,
        pageNum: sm.pageNum
      };
      params.timeStart = this.date[0];
      params.timeEnd = this.date[1];
      return params;
    },
  
    // 页码数切换
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.searchModel.pageNum = 1;
      this.search();
    },
    // 跳转
    jump(pageNum) {
      this.searchModel.pageNum = pageNum;
      this.search();
    },
    // 搜索
    search() {
      const params = this.buildParams();
      return this.$http.get('/vipsms/getTemplates', params)
        .then(res => {
          this.page = res.data;
        });
    },
    getRowKey(row) {
      return row.id;
    },
  },
};
</script>

<style lang="scss" scoped>
.product-template-list-content .email-table {
  padding: 0;
}
.error-text {
  color: #e51c23;
}
.success-text {
  color: #0db3a6;
}
.loading-text {
  color: #259b24;
}
.in_approval {
  background: #FFA726;
}
.pass_approval {
  background: #00C853;
}
.refuse_approval{
  background: #FF4D4F;
}


.in_approval,.pass_approval,.refuse_approval{
  padding:0px 6px;
  line-height:22px;
  border-radius: 11px;
  color:#fff;
  font-size: 12px;
}
.view-detail{
  color: $color-primary;
}
.mail-receiver {
  display: flex;
  i {
    color: #faae14;
    margin-left: 4px;
    margin-right: 2px;
  }
}
</style>
<style lang="scss">
// .product-template-list-content .email-table {
//   // border: 1px solid #ebeef5;
//   border-bottom: none;
//   .sms-template-record-table-header th{
//     background: #fafafa;
//   }
// }

.email-table.el-table--border {
    border-top:1px solid #ebeef5;
    border-left:1px solid #ebeef5;
    &::after {
        width: 1px !important;
    }
    .el-table__empty-block{
      border-bottom:1px solid #ebeef5;
    }
}
.sms-template-record-table thead th{
  background:#FAFAFA;
}
</style>